<template>
	<view class="index">
		<view class="title">渣土运转管理</view>
		<view class="btn">
			<u-button type="primary" @click="enterSys">进入系统</u-button>
		</view>
		
		<u-popup v-model="loginPopup" mode="bottom">
			<view class="login-popup">
				<view style="display: flex; align-items: center; margin-bottom: 50rpx;" >
					<text>手机号：</text>
					<u-input v-model="phoneText" border placeholder="请输入手机号" maxlength="11" type="number"></u-input>
				</view>
				<u-button type="primary" @click="login">登录</u-button>
			</view>
		</u-popup>
		
		<view class="footer">永庆(重庆)企业咨询管理</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import { apiLogin } from '@/api/index.js';
	
	const phoneText = ref('')
	
	//登录
	const login = async ()=> {
		if(!(/^1\d{10}$/.test(phoneText.value))){
			uni.showToast({
				title: '请输入正确的手机号!',
				icon: 'none'
			})
			return false
		}
		const res = await apiLogin(phoneText.value)
		console.log('用户信息',res);
		const {id, name, phone,user_type} = res;
		uni.setStorageSync("userID", id);
		uni.setStorageSync("name", name);
		uni.setStorageSync("phone", phone);
		uni.setStorageSync("user_type", String(user_type?user_type:''));
		uni.reLaunch({
			//userType 0：司机  1 加油员
			url: user_type === 0 ? '/pages/driver/driver' : '/pages/olier/olier'
		})
	}
	
	//登录popup显示
	const loginPopup = ref(false)
	//点击进入系统按钮
	const enterSys = async ()=> {
		const userID = uni.getStorageSync('userID')
		if(!userID){
			uni.showModal({
				title: '提示',
				content: '还未登录,是否登录?',
				showCancel: true,
				success(res){
					if(res.confirm){
						loginPopup.value = true
					}
				}
			})
		}else{
			const user_type = uni.getStorageSync('user_type') || ''
			uni.reLaunch({
				url: user_type === '0' ? '/pages/driver/driver' : '/pages/olier/olier'
			})
		}
	}

	

	
</script>
<style lang="scss" scoped>
	.index{
		height: 100vh;
		background: #ecf5ff;
		padding-top: 100rpx;
	}
		
	.title{
		font-size: 60rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 30%;
		letter-spacing: 10rpx;
	}
	.btn{
		margin-top: 100rpx;
		padding: 0 20rpx;
	}
	.footer{
		position: absolute;
		color: #82848a;
		left: 0;
		right: 0;
		bottom: 30rpx;
		text-align: center;
	}
	.login-popup{
		height: 25vh;
		padding: 30rpx;
	}
</style>